<template>
  <div class="task-sidebar">
    <div class="task-sidebar-list" v-for="item in sidebar" :key="item.id">
      <div class="sidebar-header"></div>
      <div class="task-list-sidebar-value" @click="handleClick(item.name)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "taskListSidebar",
  data() {
    return {
      sidebar: [
        { id: 1, name: "添加任务", icon: "el-icon-plus" },
        { id: 2, name: "搜索", icon: "el-icon-search" },
        { id: 3, name: "今天", icon: "el-icon-date" },
        { id: 4, name: "预览", icon: "el-icon-view" },
        { id: 5, name: "过滤器&标签", icon: "el-icon-filter" },
        { id: 6, name: "已完成", icon: "el-icon-check" },
      ],
    };
  },
  methods: {
    handleClick(name) {
      this.$emit("item-click", name);
      console.log("我传递id了没", name);
    },
  },
};
</script>

<style lang="scss" scoped>
.task-sidebar {
  display: flex;
  flex-direction: column;
  background-color: #fcfaf8;
  width: 200px;
  height: 100vh;
  gap: 8px;
  .task-sidebar-list {
    padding: 4px 12px;
    .task-list-sidebar-value {
      cursor: pointer;
    }
  }
}
</style>
